<div>
  ng-content.component
</div>
<ng-content></ng-content>
<div style="background:rgb(226, 189, 189);">
  <p style="background:rgb(189, 189, 226);padding:3px;">B标签在A元素标签中被称为 Content Children
    <br> 在A组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 @ContentChild() 查询元素B
  </p>

  <p style="background:rgb(216, 226, 189);padding:3px;">
    在A组件的模板中定义的内容B，它是组件的一部分，被称为 View Children
    <br> 在父组件A的 ngAfterViewInit 生命周期钩子中才能成功获取通过 @ViewChild() 查询的元素B
  </p>

  <p style="background:rgb(226, 189, 214);padding:3px;">@ViewChild 装饰器用于获取模板视图中的元素，它支持 Type 类型或 string 类型的选择器，同时支持设置 read 查询条件，以获取不同类型的实例。
    <br> 而 @ViewChildren 装饰器是用来从模板视 图中获取匹配的多个元素，返回的结果是一个 QueryList 集合。
    <br>@ContentChild()及@ContentChildren()同理
  </p>
  <p style="background:rgb(238, 100, 9);padding:3px;">
      @ContentChild()及@ContentChildren()同理
    </p>
</div>